import type { CSSProperties, PropType } from 'vue';

import { defineAsyncComponent, defineComponent, h } from 'vue';

const ElOption = defineAsyncComponent(() =>
  Promise.all([
    import('element-plus/es/components/select/index'),
    import('element-plus/es/components/option/style/css'),
  ]).then(([res]) => res.ElOption),
);
const ElSelect = defineAsyncComponent(() =>
  Promise.all([
    import('element-plus/es/components/select/index'),
    import('element-plus/es/components/select/style/css'),
  ]).then(([res]) => res.ElSelect),
);
// 修复 EnhancedSelect 组件定义
const EnhancedSelect = defineComponent({
  name: 'EnhancedSelect',
  inheritAttrs: false,
  props: {
    showValue: {
      type: Boolean,
      default: false,
    },
    valuePosition: {
      type: String as PropType<'left' | 'right'>,
      default: 'right',
      validator: (value: string) => ['left', 'right'].includes(value),
    },
    valueStyle: {
      type: Object as PropType<CSSProperties>,
      default: () => ({ color: '#909399', fontSize: '12px' }),
    },
    options: {
      type: Array as PropType<Array<number | Record<string, any> | string>>,
      default: () => [],
    },
  },
  setup(props, { attrs, slots }) {
    // 渲染选项
    const renderOptions = () => {
      if (!Array.isArray(props.options) || props.options.length === 0) {
        return null;
      }

      return props.options.map((option, index) => {
        if (typeof option === 'object' && option !== null) {
          const { value, label, ...rest } = option;
          const optionKey = `option-${value}-${index}`;

          // 如果不显示值，使用普通选项
          if (!props.showValue) {
            return h(ElOption, {
              value,
              label,
              ...rest,
              key: optionKey,
            });
          }

          // 显示值的自定义选项
          return h(
            ElOption,
            {
              value,
              label: String(value), // 使用 value 作为实际表单值
              ...rest,
              key: optionKey,
            },
            {
              default: () => {
                const valueSpan = h(
                  'span',
                  { style: props.valueStyle },
                  String(value),
                );
                const labelSpan = h('span', String(label || value));

                const containerStyle: CSSProperties = {
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  width: '100%',
                };

                if (props.valuePosition === 'right') {
                  return h('div', { style: containerStyle }, [
                    labelSpan,
                    valueSpan,
                  ]);
                }
                return h('div', { style: containerStyle }, [
                  valueSpan,
                  labelSpan,
                ]);
              },
            },
          );
        }

        // 普通字符串或数字选项
        const optionValue = String(option);
        return h(ElOption, {
          value: optionValue,
          label: optionValue,
          key: `option-${optionValue}-${index}`,
        });
      });
    };

    return () => {
      const slotContent = slots.default ? slots.default() : renderOptions();
      return h(
        ElSelect,
        {
          ...attrs,
        },
        {
          default: () => slotContent,
        },
      );
    };
  },
});
export { EnhancedSelect };
